<template>
  <div class="setupWrapper">
    <ul>
      <li v-for="(item, index) in setupData" :key="index">
        <div class="top">
          <span>{{ item.name }}</span>
          <el-switch active-color="#13ce66" inactive-color="#2b3036" v-model="item.isShow" />
        </div>
        <div class="tips">{{ item.tips }}</div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import { ISetupData } from '@/components/const'
export default class Privacy extends Vue {
  // 隐私设置
  private setupData: ISetupData[] = [
    {
      name: 'User Email',
      tips: '如果你将用户邮箱隐藏，别人将看不到你的邮箱，将不能用邮箱联系你',
      isShow: true,
    },
    {
      name: 'GitHub Link',
      tips: '如果你将 GitHub 链接隐藏，别人将看不到你的 GitHub',
      isShow: true,
    },
    {
      name: 'Twitter Link',
      tips: '如果你将 Twitter 链接隐藏，别人将看不到你的 Twitter',
      isShow: true,
    },
    {
      name: 'Discord Link',
      tips: '如果你将 Discord 链接隐藏，别人将看不到你的 Discord',
      isShow: true,
    },
    {
      name: 'User Profile',
      tips: '如果你将 Profile 链接隐藏，别人将看不到你的 Profile',
      isShow: true,
    },
    {
      name: 'Interest Label',
      tips: '如果你将 Label 链接隐藏，别人将看不到你的 Label',
      isShow: true,
    },
    {
      name: 'NFTs',
      tips: '如果你将 NFTs 链接隐藏，别人将看不到你的 NFTs',
      isShow: true,
    },
    {
      name: 'POAPs',
      tips: '如果你将 POAPs 链接隐藏，别人将看不到你的 POAPs',
      isShow: true,
    },
    {
      name: 'COINs',
      tips: '如果你将 COINs 链接隐藏，别人将看不到你的 COINs',
      isShow: true,
    },
  ]
}
</script>

<style lang="scss" scoped>
.setupWrapper {
  padding: 24px;
  height: 100%;
  ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    li {
      margin-bottom: 10px;
      width: 19%;
      height: 100px;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 10px;

      border: 1px solid #2b3036;
      background-color: #1d1e27;
      div.top {
        display: flex;
        justify-content: space-between;

        span {
          color: #ffff;
        }
      }

      div.tips {
        padding-top: 10px;
        color: #9e9ea7;
      }
      &:hover {
        transition: all 0.5s;
        box-shadow: #171821;
      }
    }
  }
}
</style>